<!--总经理信箱-->
<template>
  <div class="mailbox-box">
    <PageTitle class="boxTitle" :text="title"></PageTitle>
    <!-- <div class="date-tips">2023-07-04 11:26 发表于重庆</div> -->
    <div class="con-box detailContent">
      <p class="p">亲爱的燃气用户：感谢您一直以来对重庆中燃的支持和信任。我们一直致力于为您提供一个安全的用气环境，我们也十分注重您的意见和建议，为了更好地服务新老用户，欢迎大家提出宝贵的建议和意见。我们将积极处理您的任何问题！</p>
      <div class="primary-tit title">信件内容</div>
      <div>
        <tui-form ref="form">
          <tui-input label="您的姓名" :required="false" :lineLeft="false" placeholder="请输入您的姓名" v-model="formData.sender"></tui-input>
          <tui-input label="联系方式" :required="true" :lineLeft="false" placeholder="请输入您的联系方式" v-model="formData.sender_contact"></tui-input>
          <tui-input label="信件标题" :required="true" :lineLeft="false" placeholder="请输入标题" v-model="formData.mail_title"></tui-input>
          <view class="letterType">
            <view class="itemTit">信件类型</view>
            <lb-picker ref="picker1" mode="selector" :list="letterType" :level="1" :columnNum="5" @confirm="pickerConfirm">
              <input class="tui-input" :required="true" :value="formData.mail_type" placeholder-class="tui-phcolor" disabled name="cause" placeholder="请选类型" maxlength="50" type="text" />
            </lb-picker>
            <tui-icon name="arrowright" size="22" color="#ccc"></tui-icon>
          </view>
          <dl class="header" v-show="mailType == 1">
            <dt>佐证材料</dt>
            <dd v-for="(item,index) in imageList" :key="index">
              <!-- <img :src="fillUrl+'/'+item"> -->
              <img :src="fillUrl+'/'+item" @tap.stop="previewImage(index,imageList)" />
            </dd>
            <dd @click="choose">
              <uni-icons type="plusempty" color="#999" size="40"></uni-icons>
            </dd>
          </dl>
          <tui-textarea label="内容描述" :required="true" :borderTop="false" placeholder="请输入描述" v-model="formData.content_description"></tui-textarea>
          <view class="tui-btn__box">
            <tui-button height="84rpx" @click="submit" :disabled="loading" :loading="loading">提交</tui-button>
          </view>
        </tui-form>
      </div>
    </div>
    <!-- <div class="con-box tips">
      <div class="warning-tit title">温馨提示</div>
      <div>初一年级是学生由小学进入中学的入门阶段。初中写作要求学生具备较强的文字运用能力。下面小编为大家带来初一的初一作文优秀范文大全800字6篇，希望对大家的写作有帮助</div>
    </div> -->

    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
import LbPicker from '@/components/lb-picker'
import { baseHostURL, fileURL } from "@/utils/config";
const rules = [{
  name: "sender_contact",
  rule: ["required"],
  msg: ["请输入联系方式"]
}, {
  name: "mail_title",
  rule: ["required"],
  msg: ["请输入标题"]
}, {
  name: "mail_type",
  rule: ["required"],
  msg: ["请选择类型"]
}, {
  name: "content_description",
  rule: ["required"],
  msg: ["请输入内容"]
}];
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel,
    LbPicker
  },
  data() {
    return {
      title: null,
      // openid: 'oi8TY6O8cwzuaSky6VNq214MHjVs',
      formData: {
        openid: '',
        sender: '',
        sender_contact: '',
        mail_type: '',
        mail_title: '',
        content_description: '',
        profile: '',
      },
      rules: rules,
      loading: false,
      index: '',
      name: '',
      letterType: [{
        label: '投诉',
        value: 1
      }, {
        label: '建议',
        value: 2
      }, {
        label: '其他',
        value: 3
      }],
      mailType: null,
      openId: null,
      fillUrl: fileURL,
      imageList: [],
      imgString: []
    };
  },
  async onShow() {

  },
  async onLoad(e) {
    var vm = this;
    vm.title = e.title
  },
  created() {
  },
  methods: {
    pickerConfirm(e) {
      var vm = this;
      // console.log(e.item);
      vm.formData.mail_type = e.item.label
      vm.mailType = e.item.value
    },
    async choose() {
      var vm = this, url = baseHostURL + "/api/file/upload";
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success(chooseImageRes) {
          // alert(JSON.stringify(chooseImageRes.tempFilePaths))
          // alert(chooseImageRes.tempFiles)
          const file = chooseImageRes.tempFiles[0]
          const reader = new FileReader()
          reader.onload = (event) => {
            const base64Image = event.target.result
            uni.showLoading({
              title: '加载中...',
              mask: true
            });
            // 在这里将base64Image发送到服务器端进行处理或者显示在页面上
            uni.uploadFile({
              url: url,
              filePath: base64Image,
              name: "file",
              header: {
                "token": '',
              },
              formData: {},
              async success(res) {
                uni.hideLoading()
                let rs = JSON.parse(res.data);
                if (rs.code != 200) {
                  vm.tui.toast(rs.message)
                  return;
                }
                // alert(JSON.stringify(rs))
                vm.imgString.push(rs.file[0])
                vm.imageList.push(rs.file[0])
              },
              fail(err) {
                uni.hideLoading()
              },
            });
          }
          reader.readAsDataURL(file)
        },
        fail(err) {
        },
      });
    },
    previewImage(i, list) {
      this.func.previewImg(i, list)
    },
    remove: function (e) {
      //移除图片
      console.log(e)
      let index = e.index
    },
    submit() {
      var vm = this;
      vm.getId()
      if (!vm.$refs.form) return;
      vm.$refs.form.validate(vm.formData, vm.rules).then(res => {
        vm.formData.openid = vm.openId
        if (vm.mailType == 1 && !vm.imgString.length) {
          uni.showToast({
            title: '请上传佐证材料',
            icon: 'none'
          }); return
        }
        vm.formData.profile = vm.mailType == 1 ? JSON.stringify(vm.imgString) : ''
        console.log(vm.formData)
        // alert(JSON.stringify(vm.formData))
        // return
        vm.loading = true
        vm.tui.request('/api/managerinfo/add', 'post', vm.formData, false, false, true).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              icon: "success",
              title: '发送成功'
            });
            setTimeout(() => {
              vm.formData = {}
              uni.redirectTo({
                url: '/pages/index/index'
              });
              vm.loading = false
            }, 500);
          }
        }).catch((e) => { })
      }).catch(errors => {
        console.log(errors)
      })
    },
    getId() {
      var vm = this;
      vm.openId = uni.getStorageSync('openId')
      // 没有openId跳转获取code页面
      if (!vm.openId) return vm.func.goto('/pages/getCode/index')
    }
  },
  mounted() {
    var vm = this;
    vm.getId()
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.mailbox-box {
  padding-bottom: 20px;
  .boxTitle {
    margin: 10px 14px;
  }
  .detailContent,
  .tips {
    p.p {
      padding: 20px 0 8px;
    }
    padding: 0 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
    :v-deep .tui-textarea__wrap,
    :v-deep .tui-input__wrap {
      padding: 12px 0 12px 8px !important;
    }
    :v-deep .tui-placeholder,
    :v-deep .tui-textarea__label,
    :v-deep .tui-textarea__self,
    :v-deep .uni-input-placeholder,
    :v-deep .tui-input__label,
    :v-deep.tui-input__self {
      font-size: 15px !important;
      uni-text,
      text {
        font-size: 15px !important;
      }
    }
    :v-deep.tui-textarea__wrap {
      align-items: flex-start !important;
    }
    :v-deep .tui-input__required {
      left: 0;
      top: 45%;
    }
    :v-deep .tui-textarea__required {
      left: 1px;
      top: 16% !important;
    }
    .tui-btn__box {
      padding-top: 30px;
    }
  }
  :v-deep .tui-form__errmsg {
    left: 14px;
    right: 14px;
  }
  .letterType {
    display: flex;
    align-items: baseline;
    padding: 12px 0 12px 8px;
    border-bottom: 1px solid #f2f2f2;
    .itemTit {
      min-width: 77px;
      padding-right: 6px;
      font-size: 15px;
      color: #333;
      position: relative;
      &::before {
        position: absolute;
        content: "*";
        left: -8px;
        top: -2px;
        color: #eb0909;
      }
    }
    .lb-picker {
      width: 100%;
      z-index: 1;
      .tui-input {
        width: 50%;
      }
    }
    :v-deep .uni-input-input {
      font-size: 15px;
    }
    .tui-icon {
      position: absolute;
      right: 0px;
      z-index: 0;
    }
  }
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 0 0;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
    dt {
      width: 64px;
      font-size: 15px;
      color: #333;
      padding: 0 20px 0 8px;
      position: relative;
      &::before {
        content: "*";
        color: #eb0909;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    dd {
      width: 80px;
      height: 80px;
      background: #f2f2f2;
      position: relative;
      margin: 0 12px 12px 0;
      .uni-icons {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
